<template>
    <div>
        <ul>
            <!-- 双向绑定 -->
            <li v-for="(item2,index2) in list" :key='index2'>
              {{item2.name}} - {{ item2.price }} - {{ index2 }}
            </li>
            <button @click='addItem'>addItem</button>
            <!-- 标签属性绑定 v-bind:简写 ：-->
            <a class="link-href" v-bind:href="link" :title="hello" :class="classStr" :style="linkCss">
              to baidu
            </a><br/>
            <!-- 条件渲染 -->
            <a v-if="isPartA">partA</a><br/>
            <a v-show="!isPartA">partB</a>
            <!-- 室件绑定 v-on:缩写@ -->
            <button @click='toggle'>toggle</button>
            <!-- 室件绑定v-on:缩写@ -->
            <input type="text" @keydown.13="onKeydown">
            <!-- 引入自定义组件事件监听 -->
            <comA @my-event='onComaMyEvent'></comA>
            <!-- 表单的数据绑定 -->
            <!-- <input v-model="myValue" type="text"> -->
            <!-- 延时修改器 -->
            <!-- <input v-model.lazy="myValue" type="text"> -->
            <!-- 数字修改器 -->
            <!-- <input v-model.number="myValue" type="text"> -->
            <!-- 去除空格修饰符 -->
            <input v-model.trim="myValue" type="text">
            {{ myValue }}
            <hr/>
            <!-- 表单双向绑定 多选/单选 -->
            <input v-model="myBox" type="checkbox" value="apple">
            <input v-model="myBox" type="checkbox" value="banana">
            <input v-model="myBox" type="checkbox" value="pinpin">
            {{ myBox }}
            <!-- <input v-model="myBox" type="radio" value="apple">
            <input v-model="myBox" type="radio" value="banana">
            <input v-model="myBox" type="radio" value="pinpin">
            {{ myBox }} -->
            <!-- 双向绑定 select -->
            <select v-model="selection">
              <option value="">请选择</option>
              <option v-for="item in selectOptions" :value="item.value" :key="item.value">{{ item.text }}</option>
            </select>
            {{ selection }}
          </ul>
    </div>
</template>
<script>
import comA from './components/a'
import Vue from 'vue'
export default {
  components: {
    comA
  },
  data () {
    return {
      selectOptions: [
        {
          text: 'apple',
          value: 0
        },
        {
          text: 'banana',
          value: 1
        }
      ],
      selection: null,
      myBox: [],
      myValue: '',
      hello: 'niubi',
      link: 'http://www.baidu.com',
      classStr: 'red-font',
      isPartA: true,
      linkCss: {
        'font-size': '20px',
        'color': 'red'
      },
      list: [
        {
          name: 'apple',
          price: 34
        },
        {
          name: 'banana',
          price: 56
        }
      ],
      objList: {
        name: 'apple',
        price: 34,
        color: 'red',
        weight: 14
      }
    }
  },
  methods: {
    addItem () {
      // 给列表店家数据
      // this.list.push({name: 'hehe', price: 256})
      // 修改第二项数组
      Vue.set(this.list, 1, {
        name: 'hehe',
        price: 256
      })
    },
    toggle () {
      this.isPartA = !this.isPartA
    },
    onKeydown () {
      console.log('on key down')
    },
    onComaMyEvent (parmfromA) {
      console.log('onComaMyEvent' + parmfromA)
    }
  }
}
</script>
